<template>
  <div class="blogOption">
    <div v-for="item in iconArr" :key="item.key">
      <div class="Option" @click="OptionFn(item)">
        <div
          :class="item.iconFont"
          :style="{ color: item.ifChoose ? item.selectIconFont : '#44444488' }"
          style="margin-bottom: 4px"
        ></div>
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import axios from "@/http";
import { ref, defineProps, onMounted, reactive, defineEmits } from "vue";
import { useUserStore } from "@/store";
import { useRoute } from "vue-router";
const store = useUserStore()
// type props = {
//   MessageLocation: number;
//   blogName: string;
// };
type blogOptionIcon = {
  key: number;
  name: string;
  iconFont: string;
  selectIconFont?: string;
  ifChoose?: boolean;
};
const props = defineProps({
  MessageLocation: {
    type: Number,
    default: 0,
  },
  blogName: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["focusTextarea"]);
let iconArr = reactive<Array<blogOptionIcon>>([
  {
    key: 0,
    name: "点赞",
    iconFont: "iconfont icondianzan",
    selectIconFont: "#fb7299",
    ifChoose: false,
  },
  {
    key: 2,
    name: "收藏",
    iconFont: "iconfont iconshoucang1",
    selectIconFont: "#f5de19",
    ifChoose: false,
  },
  {
    key: 1,
    name: "评论",
    iconFont: "iconfont iconpinglun1",
    selectIconFont: "",
  },
  { key: 3, name: "返回顶部", iconFont: "iconfont iconhuidingbu" },
]);
onMounted(() => {
  ifCurrentBlogHasCollect();
  ifCurrentBlogHasGood();
});
const route = useRoute();
const OptionFn = (item: blogOptionIcon) => {
  switch (item.key) {
    case 0:
      iconArr[0].ifChoose ? sendGoodDelQuest() : sendGoodAddQuest();
      return;
    case 1:
      goMessage();
      return;
    case 2:
      iconArr[1].ifChoose ? sendCollectDelQuest() : sendCollectAddQuest();
      return;
    case 3:
      goBackTop();
      return;
  }
};
const currentCollectStatus = ref<null | number>(null);
const currentHistoryStatus = ref<null | number>(null);
const ifCurrentBlogHasCollect = () => {
  axios
    .post("/collect/search", {
      blogId: route.params.id,
      username: store.user.username,
    })
    .then((res) => {
      const collectData = res.data.data[0];
      currentCollectStatus.value = collectData ? collectData.id : null;
      collectData
        ? //说明当前博客已被收藏
          (iconArr[1].ifChoose = true)
        : (iconArr[1].ifChoose = false);
    });
};

const ifCurrentBlogHasGood = () => {
  axios
    .post("/history/search", {
      blogId: route.params.id,
      username: store.user.username,
    })
    .then((res) => {
      const historyData = res.data.data[0];
      currentHistoryStatus.value = historyData ? historyData.id : null;
      historyData
        ? //说明当前博客已被收藏
          (iconArr[0].ifChoose = true)
        : (iconArr[0].ifChoose = false);
    });
};

const goMessage = () => {
  const PCDom = document.querySelector(".PCindex");
  PCDom && (PCDom.scrollTop = props.MessageLocation);
  emit("focusTextarea");
  //   document.querySelector("textarea").focus()
};
const sendGoodAddQuest = () => {
  axios
    .post("/history/add", {
      username: store.user.username,
      blogId: route.params.id,
      blogName: props.blogName,
    })
    .then((res) => {
      if (res.data.error === -1) {
        currentHistoryStatus.value = res.data.data;
        iconArr[0].ifChoose = true;
      }
    });
};
const sendGoodDelQuest = () => {
  axios
    .post("/history/del", {
      id: currentHistoryStatus.value ? currentHistoryStatus.value : null,
      blogId: route.params.id,
    })
    .then((res) => {
      res.data.error === -1 && (iconArr[0].ifChoose = false);
    });
};
const sendCollectAddQuest = () => {
  axios
    .post("/collect/add", {
      username: store.user.username,
      blogId: route.params.id,
      blogName: props.blogName,
    })
    .then((res) => {
      if (res.data.error === -1) {
        iconArr[1].ifChoose = true;
        currentCollectStatus.value = res.data.data;
      }
    });
};
const sendCollectDelQuest = () => {
  axios
    .post("/collect/del", {
      id: currentCollectStatus.value ? currentCollectStatus.value : null,
      blogId: route.params.id,
    })
    .then((res) => {
      res.data.error === -1 && (iconArr[1].ifChoose = false);
    });
};
const goBackTop = () => {
  let PCDom = document.querySelector(".PCindex");
  let timer = setInterval(() => {
    PCDom && PCDom.scrollTop !== 0 && (PCDom.scrollTop -= 30);
    if (document.querySelector(".PCindex")?.scrollTop === 0 && timer) {
      clearInterval(timer);
    }
  });
};
</script>

<style lang="scss" scoped>
.blogOption {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100px;
  height: 300px;
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  left: 60px;
  top: 0px;
  bottom: 100px;
  margin: auto;
  perspective: 1000px;
  // transform-style: preserve-3d;
  .Option {
    text-align: center;
    div {
      transition: all 0.3s;
      font-size: 33px;
      color: #44444488;
      animation: threeDY 4s linear infinite reverse;
      & + span {
        color: #333;
        font-size: 13px;
      }
      &:hover + span {
        color: chocolate;
      }
      // transform: rotateY(20deg);
    }
  }
}
@keyframes threeDY {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
</style>
